<template>
    <div>
        <el-container>
            <el-header>
                <Nav></Nav>
            </el-header>
            <el-container class="middle">
                <el-main>
                    <el-row>
                        <el-col :span="8">
                            <el-card style="padding: 0; margin: 0 20px">
                                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                                <div style="padding: 14px;">
                                    <span>股票的心法</span>
                                    <div class="bottom clearfix">
                                        <time class="time">2020-1-10 9:30</time>
                                        <el-button type="text" class="button">查看</el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card style="padding: 0; margin: 0 20px">
                                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                                <div style="padding: 14px;">
                                    <span>交易系统的建立</span>
                                    <div class="bottom clearfix">
                                        <time class="time">2020-1-10 9:30</time>
                                        <el-button type="text" class="button">查看</el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card style="padding: 0; margin: 0 20px">
                                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                                <div style="padding: 14px;">
                                    <span>三易交易系统</span>
                                    <div class="bottom clearfix">
                                        <time class="time">2020-1-10 9:30</time>
                                        <el-button type="text" class="button">查看</el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="8">
                            <el-card style="padding: 0; margin: 0 20px">
                                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                                <div style="padding: 14px;">
                                    <span>股票的心法</span>
                                    <div class="bottom clearfix">
                                        <time class="time">2020-1-10 9:30</time>
                                        <el-button type="text" class="button">查看</el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card style="padding: 0; margin: 0 20px">
                                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                                <div style="padding: 14px;">
                                    <span>交易系统的建立</span>
                                    <div class="bottom clearfix">
                                        <time class="time">2020-1-10 9:30</time>
                                        <el-button type="text" class="button">查看</el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card style="padding: 0; margin: 0 20px">
                                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                                <div style="padding: 14px;">
                                    <span>三易交易系统</span>
                                    <div class="bottom clearfix">
                                        <time class="time">2020-1-10 9:30</time>
                                        <el-button type="text" class="button">查看</el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="8">
                            <el-card style="padding: 0; margin: 0 20px">
                                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                                <div style="padding: 14px;">
                                    <span>股票的心法</span>
                                    <div class="bottom clearfix">
                                        <time class="time">2020-1-10 9:30</time>
                                        <el-button type="text" class="button">查看</el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card style="padding: 0; margin: 0 20px">
                                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                                <div style="padding: 14px;">
                                    <span>交易系统的建立</span>
                                    <div class="bottom clearfix">
                                        <time class="time">2020-1-10 9:30</time>
                                        <el-button type="text" class="button">查看</el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card style="padding: 0; margin: 0 20px">
                                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                                <div style="padding: 14px;">
                                    <span>三易交易系统</span>
                                    <div class="bottom clearfix">
                                        <time class="time">2020-1-10 9:30</time>
                                        <el-button type="text" class="button">查看</el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                    <el-pagination
                            style="text-align: center;margin-top: 10px"
                            :page-size="20"
                            :pager-count="11"
                            layout="prev, pager, next"
                            :total="1000">
                    </el-pagination>
                </el-main>
                <el-aside width="300px">
                    <el-card class="box-card">
                        <el-row>
                            <h4 style="margin: 2px 5px;">点击排行</h4>
                            <el-divider></el-divider>
                            <h5 style="margin: 2px 5px;">aaaaaaa</h5>
                            <h5 style="margin: 2px 5px;">aaaaaaa</h5>
                            <h5 style="margin: 2px 5px;">aaaaaaa</h5>
                            <h5 style="margin: 2px 5px;">aaaaaaa</h5>
                            <h5 style="margin: 2px 5px;">aaaaaaa</h5>
                            <h5 style="margin: 2px 5px;">aaaaaaa</h5>
                            <h5 style="margin: 2px 5px;">aaaaaaa</h5>
                            <h5 style="margin: 2px 5px;">aaaaaaa</h5>
                            <h5 style="margin: 2px 5px;">aaaaaaa</h5>
                        </el-row>
                    </el-card>
                    <el-card class="box-card">
                        <el-row>
                            <h4 style="margin: 2px 5px;">讨论圈</h4>
                            <el-divider></el-divider>
                            <h5 style="margin: 5px 5px;"></h5>
                            <h5 style="margin: 5px 5px;">大盘涨个股却要下跌为什么?</h5>
                            <h5 style="margin: 5px 5px;">为什么龙头一直涨?</h5>
                            <h5 style="margin: 5px 5px;">为什么龙头一直涨?</h5>
                            <h5 style="margin: 5px 5px;">为什么龙头一直涨?</h5>
                            <h5 style="margin: 5px 5px;">为什么龙头一直涨?</h5>
                        </el-row>
                    </el-card>
                    <el-card class="box-card">
                            <span>广告位</span>
                    </el-card>
                </el-aside>
            </el-container>
            <el-footer>备案号：冀ICP备19020033号</el-footer>
        </el-container>
    </div>
</template>

<script>
    import Nav from "../components/Nav";
    export default {
        name: "column",
        components: {Nav},
        data () {
            return {
                count: 10,
                loading: false
            }
        },
        mounted () {

        }
    }
</script>

<style scoped>
    .el-footer {
        background-color: white;
        color: #333;
        line-height: 60px;
        text-align: center;
    }

    .el-aside {
        background-color: white;
        color: #333;
    }

    .middle {
        padding: 5px;
        margin: 5px auto;
        max-width: 1200px;
        min-width: 1000px;
        min-height: 1200px;
        background-color: white;
        color: #333;
    }
    .el-aside .el-card{
        margin: 6px 3px;
        min-height: 200px;
        max-height: 500px;
    }

    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>
